<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="微信服务号" hasFeedback>
          <a-select style="width: 300px" v-decorator="['type', {}]" placeholder="请选择服务号类型">
            <a-select-option value="0">没有微信服务号</a-select-option>
            <a-select-option value="1">JM跨境购</a-select-option>
            <a-select-option value="2">唯品会合肥城市奥莱服务号</a-select-option>
            <a-select-option value="3">挑剔小姐MISS PICKY</a-select-option>
            <a-select-option value="4">美丽旅程</a-select-option>
            <a-select-option value="5">海蜇优品</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人电话" hasFeedback>
          <a-input placeholder="请输入联系人电话" v-decorator="['gateway', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="语言选项" hasFeedback>
          <a-input placeholder="请输入" v-decorator="['subnetMask', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商业执照" hasFeedback>
          <a-input placeholder="请输入MAC" v-decorator="['mac', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商家名称" hasFeedback>
          <a-input placeholder="请输入DNS" v-decorator="['dns', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="水印图片" hasFeedback>
        <a-input placeholder="请输入DNS" v-decorator="['dns', {}]" />
      </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="密码" hasFeedback>
          <a-input placeholder="请输入密码" v-decorator="['dns', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="网关" hasFeedback>
          <a-input placeholder="输入网关" v-decorator="['gateway', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱" hasFeedback>
          <a-input placeholder="请输入邮箱" v-decorator="['subnetMask', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="省市区" hasFeedback>
          <a-input placeholder="请输入MAC" v-decorator="['mac', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="产品分类" hasFeedback>
          <a-select style="width: 300px" v-decorator="['type', {}]" placeholder="请选择">
            <a-select-option value="0">腮红</a-select-option>
            <a-select-option value="1">眼影</a-select-option>
            <a-select-option value="2">口红</a-select-option>
            <a-select-option value="3">睫毛</a-select-option>
            <a-select-option value="4">护肤品</a-select-option>
            <a-select-option value="5">眉笔</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="详细地址" hasFeedback>
          <a-input placeholder="请输入详细地址" v-decorator="['dns', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="公司法人" hasFeedback>
          <a-input placeholder="请输入公司法人" v-decorator="['dns', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="代理商类型" hasFeedback>
          <a-input placeholder="输入网关" v-decorator="['gateway', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="公司电话" hasFeedback>
          <a-input placeholder="请输入公司电话" v-decorator="['subnetMask', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开通有赞" hasFeedback>
          <a-input placeholder="请输入MAC" v-decorator="['mac', {}]" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width: 100%">
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系人" hasFeedback>
          <a-input placeholder="请输入DNS" v-decorator="['dns', {}]" />
        </a-form-item>
      </a-col>
      <a-col :span="24 / 2">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="测试账号" hasFeedback>
          <a-input v-if="title == '新增'" placeholder="输入ID" v-decorator="['id', {}]" />
          <a-input v-else-if="title == '编辑'" v-decorator="['id', {}]" disabled="disabled" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  import {addRole,editRole,duplicateCheck } from '@/api/api'
  export default {
    name: "RoleModal",
    data () {
      return {
        title:"操作",
        visible: false,
        roleDisabled: false,
        model: {},
        layout: {
          labelCol: { span: 3 },
          wrapperCol: { span: 14 },
        },
        confirmLoading: false,
        validatorRules:{
          username:[{required: true, message: '请输入用户账号!'},
            {validator: this.validateUsername,}],
          password: [{required: true,pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,message: '密码由8位数字、大小写字母和特殊符号组成!'},
            {validator: this.validateToNextPassword,trigger: 'change'}],
          confirmpassword: [{required: true, message: '请重新输入登录密码!',},
            { validator: this.compareToFirstPassword,}],
          realname:[{ required: true, message: '请输入用户名称!' }],
          phone: [{validator: this.validatePhone}],
          email: [{validator: this.validateEmail}],
          roles:{},
          workNo:[ { required: true, message: '请输入工号' },
            { validator: this.validateWorkNo }],
          telephone: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' },]
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      }

    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        //编辑页面禁止修改角色编码
        if(this.model.id){
          this.roleDisabled = true;
        }else{
          this.roleDisabled = false;
        }
      },
      close () {
        // this.$refs.form.clearValidate();
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if(!this.model.id){
              obj=addRole(this.model);
            }else{
              obj=editRole(this.model);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },
      validateRoleCode(rule, value, callback){
        if(/[\u4E00-\u9FA5]/g.test(value)){
          callback("角色编码不可输入汉字!");
        }else{
          let params = {
            tableName: "sys_role",
            fieldName: "role_code",
            fieldVal: value,
            dataId: this.model.id,
          };
          duplicateCheck(params).then((res)=>{
            if(res.success){
              callback();
            }else{
              callback(res.message);
            }
          });
        }
      }
    }
  }
</script>

<style scoped>

</style>